import {Image, StyleSheet, View, Text, TouchableOpacity, ScrollView} from 'react-native';
import {Stack, useRouter} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';
import {useEffect, useState} from "react";
import avator from "@/assets/images/me/avator.png"
import checkGroupIcon from "@/assets/images/releaseImg/checkGroup.png"
import { getMyCoummityGroupListByRequest } from "@/services/activityServices"
import {useDispatch, useSelector} from "react-redux";
import {RootState} from "@/store";
import {setInputDataByItem} from "@/store/slices/createActiveSilce";

export default function bindGroupScreen() {

    const router = useRouter();
    const dispatch = useDispatch();

    const [list, setList] = useState([]);
    const [active, setActive] = useState(-1);

    const createActive  = useSelector((state: RootState) => state.createActive);

    const getList = function () {
        getMyCoummityGroupListByRequest()
            .then(res => {
                setList(res?.data?.items);
                console.log('res', res);
            })
            .catch(err => {
                console.log('err', err);
            })
    };

    const cutActive = function (index: number) {
        setActive(index)
    };

    useEffect(() => {
        getList();
    }, []);

    useEffect(() => {
        const index = createActive?.inputData?.parentId?.index
        if (index >= 0) {
            setActive(index);
        };

    }, [list])

    const save = function () {
        const item = list[active];
        const parentId = item?.communityId;
        const title = item?.name
        dispatch(setInputDataByItem({ parentId: { parentId, index: active, title } }))
        router.back();
    };

    return (
        <View style={{ height: "100%", backgroundColor: "#f7f7f7" }}>
            <Stack.Screen
                options={{
                    title: '请选择社群', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#f7f7f7', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
            <ScrollView style={{ flex: 1, }}>
                <View style={styles.bindGroupContainer}>
                    {
                        list?.map((item: any, index: number) => {
                            return (
                                <View style={styles.groupItem} key={item?.communityId}>
                                    <View style={styles.avator}>
                                        <Image source={{ uri: item.coverUrl }} style={{ width: "100%", height: "100%" }} />
                                    </View>
                                    <View style={styles.groupItemContent}>
                                        <View>
                                            <Text>{ item?.name }</Text>
                                        </View>
                                        <View style={styles.memberNumber}>
                                            <Text style={styles.memberNumberText}>成员数:{ item?.memberNum }人</Text>
                                        </View>
                                    </View>
                                    {
                                        active == index ? (
                                            <TouchableOpacity onPress={() => cutActive(-1)}>
                                                <View style={styles.checkIcon}>
                                                    <Image source={checkGroupIcon} style={{ width: "100%", height: "100%" }} />
                                                </View>
                                            </TouchableOpacity>
                                        ) : (
                                            <TouchableOpacity onPress={() => cutActive(index)}>
                                                <View style={styles.unCheck}></View>
                                            </TouchableOpacity>
                                        )
                                    }
                                </View>
                            )
                        })
                    }
                </View>
            </ScrollView>

            {
                active >= 0 && (
                    <TouchableOpacity onPress={save}>
                        <View style={styles.save}>
                            <Text style={styles.saveText}>保存</Text>
                        </View>
                    </TouchableOpacity>
                )
            }

            {
                active == -1 && (
                    <TouchableOpacity>
                        <View style={styles.saveUnActive}>
                            <Text style={styles.saveTextUnActive}>保存</Text>
                        </View>
                    </TouchableOpacity>
                )
            }
        </View>

    );
}

const styles = StyleSheet.create({
    bindGroupContainer: {
        flex: 1,
        backgroundColor: "#f7f7f7",
        padding: 12,
    },
    groupItem: {
        flexDirection: "row",
        alignItems: "center",
        backgroundColor: "#fff",
        paddingHorizontal: 12,
        paddingVertical: 16,
        borderRadius: 8,
        marginBottom: 12,
    },
    avator: {
        height: 52,
        width: 52,
        borderRadius: 50,
        overflow: "hidden",
    },
    groupItemContent: {
        marginLeft: 10,
        flex: 1,
    },
    save: {
        width: scaleSize(351),
        height: 38,
        backgroundColor: "#EC6138",
        borderRadius: 19,
        margin: "auto",
        marginBottom: 23,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
    },
    saveText: {
        color: "#fff",
    },
    saveUnActive: {
        width: scaleSize(351),
        height: 38,
        backgroundColor: "#E4E6EC",
        borderRadius: 19,
        margin: "auto",
        marginBottom: 23,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
    },
    saveTextUnActive: {
        color: "#fff",
    },
    memberNumber: {
        marginTop: 4,
    },
    memberNumberText: {
        color: "#9C9EAC",
        fontSize: 12,
    },
    checkIcon: {
        width: 13,
        height: 13
    },
    unCheck: {
        width: 13,
        height: 13,
        borderRadius: 50,
        borderWidth: 1,
        borderColor: "#E4E6EC"
    },
});
